<template>
  <view class="tabbar-item" :style="tabbarItemStyle" @click="handleChangeClick">
    <span class="icon">
      <slot></slot>
    </span>
    <span class="text">{{ name }}</span>
  </view>
</template>

<script>
export default {
    props: {
        name: String,
    },
    data() {
      return {
        index: undefined,
        change: null,
        active: false
      }
    },
    computed: {
      tabbarItemStyle() {
        if (this.active) {
          return 'color: orange'
        } else {
          return 'color: black'
        }
      }
    },
    name: 'ty-tab-item',
    methods: {
      handleChangeClick() {
        this.change(this.index);
        this.active = true;
      }
    }
}
</script>

<style scoped>
.tabbar-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.text {
  margin-top: 8px;
}
.icon {
  font-size: 26px;
}
</style>